<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.list {
				width: 990px;
				margin: 100px auto 0;
			}

			.item {
				padding: 15px;
				transition: all 0.5s;
				display: flex;
				border-top: 1px solid #e4e4e4;
			}

			.item:nth-child(4n) {
				margin-left: 0;
			}

			.item:hover {
				cursor: pointer;
				background-color: #f5f5f5;
			}

			.item img {
				width: 80px;
				height: 80px;
				margin-right: 10px;
			}

			.item .name {
				font-size: 18px;
				margin-right: 10px;
				color: #333;
				flex: 2;
			}

			.item .name .tag {
				display: block;
				padding: 2px;
				font-size: 12px;
				color: #999;
			}

			.item .price,
			.item .sub-total {
				font-size: 18px;
				color: firebrick;
				flex: 1;
			}

			.item .price::before,
			.item .sub-total::before,
			.amount::before {
				content: "¥";
				font-size: 12px;
			}

			.item .spec {
				flex: 2;
				color: #888;
				font-size: 14px;
			}

			.item .count {
				flex: 1;
				color: #aaa;
			}

			.total {
				width: 990px;
				margin: 0 auto;
				display: flex;
				justify-content: flex-end;
				border-top: 1px solid #e4e4e4;
				padding: 20px;
			}

			.total .amount {
				font-size: 18px;
				color: firebrick;
				font-weight: bold;
				margin-right: 50px;
			}
		</style>
	</head>
	<body>
		<div class="list">
			<!-- <div class="item">
        <img
          src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg"
          alt=""
        />
        <p class="name">
          称心如意手摇咖啡磨豆机咖啡豆研磨机
          <span class="tag">【赠品】10优惠券</span>
        </p>
        <p class="spec">白色/10寸</p>
        <p class="price">289.90</p>
        <p class="count">x2</p>
        <p class="sub-total">579.80</p>
      </div> -->
		</div>
		<div class="total">
			<div>合计：<span class="amount">计算中...</span></div>
		</div>
		<script>
			// 数据
			const goodsList = [
				{
					id: "4001172",
					name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
					price: 289.9,
					picture:
						"https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
					count: 2,
					spec: { color: "白色" },
				},
				{
					id: "4001009",
					name: "竹制干泡茶盘正方形沥水茶台品茶盘",
					price: 109.8,
					picture:
						"https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
					count: 3,
					spec: { size: "40cm*40cm", color: "黑色" },
				},
				{
					id: "4001874",
					name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
					price: 488,
					picture:
						"https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
					count: 1,
					spec: { color: "青色", sum: "一大四小" },
				},
				{
					id: "4001649",
					name: "大师监制龙泉青瓷茶叶罐",
					price: 139,
					picture:
						"https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
					count: 8,
					spec: { size: "小号", color: "紫色" },
					gift: "50g茶叶,清洗球,礼盒",
				},
			];

			// 总价格
			let total = 0;
			// div.List
			const divList = document.querySelector("div.list");
			// goodsList
			goodsList.forEach((element) => {
				// 结构对象
				let { name, price, picture, count, spec, gift = "" } = element;

				// 对每个商品的赠品进行处理
				const gifts = gift ? gift.split(",") : gift;
				const giftSpan = gifts
					? gifts
							.map((item) => {
								return `<span class="tag">【赠品】${item}</span>`;
							})
							.join("")
					: "";

				// 对每个商品的属性进行处理
				spec = Object.values(spec).join("/");

				// 对每个商品的价格进行处理
				price = price.toFixed(2);
				const subTotal = (price * count).toFixed(2); // 计算此商品总价

				// 创建div节点
				const oDiv = document.createElement("div");
				oDiv.classList.add("item");
				oDiv.innerHTML = `
				  <img
				    src="${picture}"
				    alt=""
				  />
				  <p class="name">
				    ${name}
				    ${giftSpan}
				  </p>
				  <p class="spec">${spec}</p>
				  <p class="price">${price}</p>
				  <p class="count">x${count}</p>
				  <p class="sub-total">${subTotal}</p>`;

				// 计算总价
				total += +subTotal;
				// 向列表添加子元素
				divList.appendChild(oDiv);
			});

			// 应用回总价区
			document.querySelector("span.amount").innerHTML = total.toFixed(2);
		</script>
	</body>
</html>
